<template>
   <div class="formItem">
        <div class="bottomBox">
        <div class="searchsize">
          <el-col  class="searchBox flex">
            <!-- <el-input
                class="w-10 m-2 mr-16 float-left"
                v-model="examineData.searchValue.keyWord"
                placeholder="请输入车头牌号/车队"
                clearable
            /> -->
            <el-select class="w-10 m-2 mr-16" v-model="examineData.searchValue.examineState" clearable  placeholder="请选择考试结果">
                <el-option
                  v-for="item in examineData.dropdown.examineState"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            <span class="dateInput">
                 <el-date-picker
                        class="w-10 m-2 mr-16"
                        v-model="examineData.searchValue.startTime"
                         type="datetimerange"
                        range-separator="至"
                        start-placeholder="考试开始时间"
                        end-placeholder="考试结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    />            
            </span>
            <el-button type="info" plain @click="reset">重置</el-button>
            <el-button type="primary" plain  @click="queryTableData"
            >查询</el-button>
          </el-col>
        </div>
        <div class="chartstyle">
          <el-table
              :data="examineData.table.tableData"
              :header-cell-style="{ background: '#F2F5FA' }"
              border
              style="width: 100%"
          >
          <el-table-column prop="examineName" label="考试名称" min-width="15%" />
            <el-table-column prop="examineBeginTime" label="考试开始时间" min-width="15%" />
            <el-table-column prop="examineEndTime" label="考试结束时间" min-width="15%" />
            <el-table-column prop="gradesSum" label="试卷总分" min-width="10%" />
            <el-table-column prop="examineState" label="考试结果" min-width="10%">
              <template #default="scope" >
                <span v-if="scope.row.examineState === 0">
                        <el-tag 
                        :type="''"
                        effect="light"
                        disable-transitions
                        >{{scope.row.examineStateStr}}</el-tag>
                </span> 
                <span v-if="scope.row.examineState === 1">
                        <el-tag 
                        :type="'warning'"
                        effect="light"
                        disable-transitions
                        >{{scope.row.examineStateStr}}</el-tag> 
                </span>
                <span v-if="scope.row.examineState == 2">
                        <el-tag 
                        :type="'info'"
                        effect="light"
                        disable-transitions
                        >{{scope.row.examineStateStr}}</el-tag>
                </span>
                <span v-if="scope.row.examineState === 4">
                      <el-tag 
                        :type="''"
                        effect="light"
                        disable-transitions
                        >{{scope.row.examineStateStr}}</el-tag>
                </span>
                <span v-if="scope.row.examineState === 3">
                      <el-tag 
                        :type="'danger'"
                        effect="light"
                        disable-transitions
                        >{{scope.row.examineStateStr}}</el-tag> 
                </span>
                <span v-if="scope.row.examineState === 5">
                      <el-tag 
                        :type="'success'"
                        effect="light"
                        disable-transitions
                        >{{scope.row.examineStateStr}}</el-tag>
                </span>
                <span v-if="scope.row.examineState === 6">
                      <el-tag 
                        :type="'info'"
                        effect="light"
                        disable-transitions
                        >{{scope.row.examineStateStr}}</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="grade" label="总分" min-width="10%" />
          </el-table>
          <div class="demo-pagination-block mt-16 mb-16">
            <el-pagination
                :pageIndex="examineData.table.pageIndex"
                :page-size="examineData.table.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="examineData.table.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
</template>
<script setup>
import { reactive, ref, markRaw, defineProps,onBeforeMount} from "vue";
import { findExaminePageList as findExaminePageList} from '@/api/exam.js'
let props = defineProps({
  userId: {
    type: String,
  },
});
let examineData =  reactive({
  searchValue:{
    examineState:'',
    timeframe:'',
    beginTime:'',
    endTime:''
  },
  dropdown:{
   examineState:[{
        label: '未开考',
        value:0
      },{
        label: '考试中',
        value:1
      },
     
    //   {
    //     label: '已考完',
    //     value:2
    //   },
      {
        label: '不及格',
        value:3
      },{
        label: '及格',
        value:4
      },{
        label: '优秀',
        value:5
      },{
        label: '未参加',
        value:6
      }],
  },
  table:{
    tableLoading: false,
    pageIndex: 1,
    pageSize: 10,
    total:0,
    tableData: [],
  }
})
const queryTableData = () => {
  examineData.table.tableLoading = true;
  let obj = JSON.parse(JSON.stringify(examineData.searchValue));
  obj.beginTime = obj.timeframe?getymdhms(obj.timeframe[0]):"",
  obj.endTime = obj.timeframe?getymdhms(obj.timeframe[1]):"",
  obj.pageIndex = examineData.table.pageIndex
  obj.pageSize = examineData.table.pageSize
  obj.userId = props.userId
  findExaminePageList(obj)
    .then((res)=>{
      examineData.table.tableLoading = false;
      if(res.code === 200){
        console.log(res)
          let data = res.body;
          examineData.table.tableData=data&&data?data.data:[];
          examineData.table.total = data&&data.total?data.total:0;
        }else{
            ElNotification({
              title: '提示',
              message: res.message?res.message:'服务器异常',
              type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
    })
    .catch(()=>{})
};
const reset = () => {
    examineData.searchValue = {}
    queryTableData();
}
onBeforeMount(() => {
    queryTableData()
})
//切换一页显示多少条数据
const handleSizeChange = (val) => {
  examineData.table.pageSize = val;
  queryTableData();
};
// 点击跳转到第几页
const handleCurrentChange = (val) => {
  examineData.table.pageIndex = val;
  queryTableData();
};
</script>
<style lang="less" scoped>
 .formItem{
     padding: 0px 56px 16px !important;
 }
 .demo-pagination-block {
     float: right;
}
</style>